@import "base";
// 整个大盒子
.all {
  width: vw(750);
  //   height: vw(1366);
  margin: 0 auto;
}
// 顶部
.top {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  font-size: vw(26);
  text-align: center;
  align-items: center;
  margin-top: vw(48);
  // 顶部返回键
  .back {
    width: vw(123);
    height: vw(57);
    border-radius: vw(20);
    border: 1px solid orange;
    line-height: vw(57);
    margin-left: vw(23);
    appearance: none;
    // border: 0;
    background-color: white;
    font-size: vw(26);
  }
}

// 顶部切换城市
.city {
  width: vw(159);
  height: vw(56);
  border: 1px solid orange;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: vw(23);
  select {
    appearance: none;
    border: 0;
    outline: none;
    font-size: vw(26);
  }
  .city_img {
    align-items: center;
    display: flex;
    img {
      height: vw(16);
      width: vw(32);
    }
  }
}
// 搜索框
.search {
  width: vw(266);
  height: vw(51);
  border-radius: vw(50);
  border: 1px solid orange;
  // text-align: center;
  margin: vw(36) auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: vw(24);
  color: #777777;
  .search_img img {
    width: vw(29);
    height: vw(30);
  }
}
// 大家都在搜
.popular {
  p {
    font-size: vw(26);
    text-align: center;
    margin-bottom: vw(14);
  }
}
// 大家都在搜的活动
.activity {
  width: vw(512);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  .activity_top,
  .activity_bottom {
    justify-content: space-between;
    display: flex;
    margin: vw(2) 0;
  }
  .activity_top span,
  .activity_bottom span {
    width: vw(125);
    height: vw(64);
    background-color: #dcdcdc;
    text-align: center;
    line-height: vw(64);
    font-size: vw(20);
    color: #898989;
    &:hover {
      color: white;
      background-color: orange;
    }
  }
}
// 热门搜索
.hot {
  width: vw(718);
  height: vw(485);
  margin: vw(37) vw(18);
  .hot_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: vw(37);
    .top-left,
    .top-right {
      display: flex;
      align-items: center;
    }
  }
}
// 推荐搜索
.recommend {
  width: vw(718);
  height: vw(360);
  margin: vw(37) vw(18);
  .recommend_top {
    display: flex;
    justify-content: space-between;
    margin: 0 0 vw(47);
    .top-left,
    .top-right {
      display: flex;
      align-items: center;
    }
  }
}
// 热门搜索、推荐搜索的左上
.top-left {
  margin-left: vw(18);
  p {
    font-size: vw(30);
  }
  div {
    margin-right: vw(24);
    img {
      width: vw(41);
      height: vw(40);
    }
  }
}
// 热门搜索、推荐搜索的右上
.top-right {
  margin-right: vw(18);
  div {
    margin-left: vw(8);
    img {
      width: vw(25);
      height: vw(26);
    }
  }
  p {
    font-size: vw(24);
  }
}
// 热门搜索的内容
.hot_content {
  display: flex;
  justify-content: space-around;
  .left_img img {
    width: vw(280);
    height: vw(352);
  }
  .right_img {
    .right-top_img img {
      width: vw(420);
      height: vw(147);
    }
    .right-bottom_img {
      display: flex;
      justify-content: space-between;
      div img {
        width: vw(205);
        height: vw(204);
      }
    }
  }
}
// 推荐搜索的内容
.recommend_content {
  display: flex;
  justify-content: space-around;
  div img {
    width: vw(219);
    height: vw(200);
  }
}
// 底部
.bottom {
  width: vw(750);
  height: vw(107);
  position: fixed;
  bottom: vw(0);
  background-color: white;
  .bottom_img {
    display: flex;
    justify-content: space-around;
    a {
      text-decoration: none;
      color: black;
      img {
        height: vw(73);
        width: vw(73);
      }
      p {
        font-size: vw(26);
        text-align: center;
      }
    }
  }
}
// 空的div
.empty {
  height: vw(60);
}
